<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
    <!-- 引入React库 -->
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- 以往的写法 -->
    <!-- <script>
      // 通过DOM向页面中添加一个div
      const div = document.createElement("div");
      div.innerHTML = "Hello World";
      const root = document.getElementById("root");
      root.appendChild(div);
    </script> -->
    <!-- 采用React后的写法 -->
    <script>
      /*
       * React.createElement(type, [props], [...children])
       *       - 用于创建一个React元素
       *       - 无法修改React元素
       *       - 参数
       *         1. 元素名（组件名）
       *         2. 元素的属性
       *         3. 元素的子元素（内容）
       *  */
      const div = React.createElement("div", {}, "Hello World");
      // console.log(div);
      // ReactDOM.createRoot()用于创建React根元素并将div渲染到根元素
      ReactDOM.createRoot(document.getElementById("root")).render(div);
    </script>
  </body>
</html>
